<template>
  <div class="news-detail">
    <h3>{{ newsDetail.title }}</h3>
    <div class="detail-header">
      <span class="click-count">{{ newsDetail.click }}次点击</span>
      <span>发布时间: {{ newsDetail.add_time | formatDate('YYYY-MM-DD')}}</span>
    </div>
    <div class="detail-content" v-html="this.newsDetail.content"></div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  methods: {
    ...mapActions('home/newsDetailStore', ['getNewsDetail']),
  },
  computed: {
    ...mapState('home/newsDetailStore', ['newsDetail']),
  },
  mounted () {
    this.getNewsDetail({
      payload: {
        newsId: this.$route.query.newsId
      }
    })
  }
};
</script>

<style scoped lang="less">
.news-detail {
  padding: 10px;
  h3 {
    margin: 0;
    color: lightblue;
  }
  .detail-header {
    margin: 20px 0;
    .click-count {
      margin-right: 40px;
    }
  }
  .detail-content {
    text-indent: 28px;
  }
}
</style>  